<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	 canvas{
	 	display: block;
	 	margin:0 auto;
	 	border:1px #888 solid;
	 }
	</style>
</head>
<body>
	<canvas>
	
	</canvas>
</body>
<script type="text/javascript">
  var canvas=document.querySelector("canvas");
  canvas.width=800;
  canvas.height=600;
  var ctx=canvas.getContext("2d");
  
  var speedX=3;
  var speedY=3;
  var x=canvas.width/2;
  var y=canvas.height/2;
  var r=60;
    
    //圆碰撞
   function move(){
     if (x+r+speedX>canvas.width||x-r+speedX<0) {
             speedX=-speedX;
     }

      if (y+r+speedY>canvas.height||y-r+speedY<0) {
             speedY=-speedY;
     }
          x+=speedX;
          y+=speedY;


          drawArc(x,y,r);
          window.requestAnimationFrame(move)
   }
   move();

   //绘圆
  function drawArc(x,y){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.beginPath()
  ctx.arc(x,y,r,0,Math.PI*2);
  ctx.fillStyle="red";
  ctx.fill();
  ctx.closePath();
  }

</script>
</html>